<template>
    <view class="container">
        <!-- 顶部导航栏 -->
        <view class="nav-bar">
            <view class="left">
                <u-icon name="arrow-left" size="32" color="#333" @click="goBack"></u-icon>
            </view>
            <view class="title">健康提醒</view>
            <view class="right">
                <u-icon name="plus" size="32" color="#333" @click="addReminder"></u-icon>
            </view>
        </view>
        
        <!-- 提醒列表 -->
        <scroll-view class="reminder-list" scroll-y>
            <view 
                class="reminder-item" 
                v-for="(item, index) in reminderList" 
                :key="index"
                :class="['reminder-type-' + item.type]"
            >
                <view class="left">
                    <view class="icon">
                        <u-icon :name="getReminderIcon(item.type)" size="32" :color="getReminderColor(item.type)"></u-icon>
                    </view>
                </view>
                <view class="content">
                    <view class="title">{{item.title}}</view>
                    <view class="time">{{item.time}}</view>
                    <view class="desc">{{item.desc}}</view>
                </view>
                <view class="actions">
                    <view class="action" @click="editReminder(item)">
                        <u-icon name="edit-pen" size="32" color="#999"></u-icon>
                    </view>
                    <view class="action" @click="deleteReminder(item)">
                        <u-icon name="trash" size="32" color="#999"></u-icon>
                    </view>
                </view>
            </view>
            
            <!-- 空状态 -->
            <view class="empty" v-if="reminderList.length === 0">
                <image src="/static/images/empty.png" mode="aspectFit"></image>
                <text>暂无提醒</text>
                <view class="add-btn" @click="addReminder">添加提醒</view>
            </view>
        </scroll-view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            reminderList: [
                {
                    id: 1,
                    title: '血压测量提醒',
                    desc: '请测量您的血压并记录',
                    time: '每天 08:00',
                    type: 'blood-pressure'
                },
                {
                    id: 2,
                    title: '服药提醒',
                    desc: '请按时服用降压药',
                    time: '每天 08:00, 12:00, 18:00',
                    type: 'medication'
                },
                {
                    id: 3,
                    title: '体重记录提醒',
                    desc: '请记录您的体重数据',
                    time: '每周一 20:00',
                    type: 'weight'
                },
                {
                    id: 4,
                    title: '运动提醒',
                    desc: '建议进行30分钟中等强度运动',
                    time: '每天 17:00',
                    type: 'sport'
                }
            ]
        }
    },
    methods: {
        goBack() {
            uni.navigateBack()
        },
        getReminderIcon(type) {
            switch (type) {
                case 'blood-pressure':
                    return 'heart'
                case 'medication':
                    return 'medicine'
                case 'weight':
                    return 'scale'
                case 'sport':
                    return 'sport'
                default:
                    return 'bell'
            }
        },
        getReminderColor(type) {
            switch (type) {
                case 'blood-pressure':
                    return '#FF4D4F'
                case 'medication':
                    return '#1890FF'
                case 'weight':
                    return '#52C41A'
                case 'sport':
                    return '#722ED1'
                default:
                    return '#FAAD14'
            }
        },
        addReminder() {
            uni.navigateTo({
                url: '/pages/health/reminder-edit'
            })
        },
        editReminder(item) {
            uni.navigateTo({
                url: `/pages/health/reminder-edit?id=${item.id}`
            })
        },
        deleteReminder(item) {
            uni.showModal({
                title: '提示',
                content: '确定要删除此提醒吗？',
                success: (res) => {
                    if (res.confirm) {
                        this.reminderList = this.reminderList.filter(reminder => reminder.id !== item.id)
                        uni.showToast({
                            title: '删除成功',
                            icon: 'success'
                        })
                    }
                }
            })
        }
    }
}
</script>

<style lang="scss">
.container {
    min-height: 100vh;
    background-color: #F7F7FA;
    
    .nav-bar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20rpx 30rpx;
        background-color: #fff;
        
        .title {
            font-size: 36rpx;
            font-weight: bold;
            color: #333;
        }
    }
    
    .reminder-list {
        padding: 30rpx;
        
        .reminder-item {
            display: flex;
            align-items: center;
            background-color: #fff;
            border-radius: 10rpx;
            padding: 30rpx;
            margin-bottom: 20rpx;
            
            .left {
                margin-right: 20rpx;
                
                .icon {
                    width: 80rpx;
                    height: 80rpx;
                    background-color: rgba(0, 0, 0, 0.05);
                    border-radius: 40rpx;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }
            }
            
            .content {
                flex: 1;
                
                .title {
                    font-size: 32rpx;
                    font-weight: bold;
                    color: #333;
                    margin-bottom: 10rpx;
                }
                
                .time {
                    font-size: 28rpx;
                    color: #999;
                    margin-bottom: 10rpx;
                }
                
                .desc {
                    font-size: 28rpx;
                    color: #666;
                }
            }
            
            .actions {
                display: flex;
                
                .action {
                    width: 60rpx;
                    height: 60rpx;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    margin-left: 20rpx;
                }
            }
            
            &.reminder-type-blood-pressure {
                border-left: 10rpx solid #FF4D4F;
            }
            
            &.reminder-type-medication {
                border-left: 10rpx solid #1890FF;
            }
            
            &.reminder-type-weight {
                border-left: 10rpx solid #52C41A;
            }
            
            &.reminder-type-sport {
                border-left: 10rpx solid #722ED1;
            }
        }
        
        .empty {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 100rpx 0;
            
            image {
                width: 200rpx;
                height: 200rpx;
                margin-bottom: 20rpx;
            }
            
            text {
                font-size: 28rpx;
                color: #999;
                margin-bottom: 30rpx;
            }
            
            .add-btn {
                font-size: 28rpx;
                color: #fff;
                background-color: #1890FF;
                padding: 16rpx 40rpx;
                border-radius: 40rpx;
            }
        }
    }
}
</style> 